/*
  学习目标：JSX - 初体验
  JSX: 允许在js文件中使用html语法
*/

import React from 'react';
import ReactDOM from 'react-dom';

const liNode1 = React.createElement('li', null, '香蕉');
const liNode2 = React.createElement('li', null, '苹果');
const liNode3 = React.createElement('li', null, '橘子');
const ulNode = React.createElement(
  'ul',
  { className: 'list' },
  // 💥ReactDOM不会解析html字符串
  liNode1,
  liNode2,
  liNode3
);

// JSX是createElement的语法糖, 本质是一样的
const divNode = (
  <ul className="list">
    <li>香蕉</li>
    <li>苹果</li>
    <li>橘子</li>
  </ul>
);

console.log('divNode  ----->  ', divNode);
console.log('ulNode  ----->  ', ulNode);

ReactDOM.render(divNode, document.getElementById('root'));
